/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import { Form, Input, DatePicker, message, Button, Tabs, Badge, Table, Alert } from 'antd';
import { connect } from 'dva';
import L from 'leaflet';   //引入leaflet
import MyPagination from '@/components/MyPagination';
import './index.less';
import './../Home/leaflet.less';
import Template1 from './Template1';
import { getTimeDistance ,timeStamp} from '@/utils/utils';
import ReactDataGrid from 'react-data-grid';
import forEach from 'lodash/forEach';
import moment from 'moment';
import request from '@/utils/request';
import ReactEcharts from 'echarts-for-react';
const { TabPane } = Tabs;
const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showType: 1,
      historyData: [],
      config_data: {},
      start_date: moment().format('YYYY-MM-DD'),
      end_date: moment().format('YYYY-MM-DD'),
      isWatch:false,
      tabPanes: [{
        name: '设备信息',
        key: 'device',
      }, {
        name: '阀前压力',
        key: 'sensor_0',
      }, {
        name: '阀后压力',
        key: 'sensor_1',
      }, {
        name: '双阀',
        key: 'modbus',
      }, {
        name: '液位传感器',
        key: 'digital_input_0',
      }, {
        name: '井盖传感器',
        key: 'digital_input_1',
      }, {
        name: '调节阀',
        key: 'control_valve',
      }],
      device_0: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [],
        loading: false,
      },
      modbus_0: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      sensor_0: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      sensor_1: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      sensor_0_chart: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      sensor_1_chart: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      digital_input_0: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      digital_input_1: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      control_valve_0: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
    };
  }

  componentDidMount() {
    const that = this;
    this.fetchBaseInfo()

    this.fetch({
      type: 'device',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    for(let i=0;i<2;i++){
      this.fetch({
        type:'sensor',
        channel:i,
        page:1,
        per_page:20,
      })
      this.fetch({
        type:'digital_input',
        channel:i,
        page:1,
        per_page:20,
      })
    }
    this.fetch({
      type: 'modbus',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'control_valve',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    that.fetSensors()
    this.timer=setInterval(function() {
      that.fetSensors();
      that.fetHistory();
      that.fetchBaseInfo()
    },15000)

  }
  fetchBaseInfo=()=>{
    const that = this;
    request(`/workstations/${this.props.editRecord.id}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      if (response.status === 200) {
        console.log('response', response);
        this.setState({
          config_data: response.data.data.hardware_configs,
          isWatch:response.data.data.is_watch
        });
      }
    });
  }
  openWatch=()=>{
    const that=this;
    request(`/workstations/${this.props.editRecord.id}/watch_mode`, {
      method: 'PUT',
    }).then(response => {
      if (response.status === 200) {
        message.success('开启监控模式成功')
        that.fetchBaseInfo()
      }
    });
  }
  componentWillUnmount() {
    if(this.timer){
      clearInterval(this.timer)
    }
  }
  fetSensors=()=>{
    for(let i=0;i<2;i++){
      this.fetchChart({
        type:'sensor',
        channel:i,
        page:1,
        per_page:100,
      })
    }
  }

  selectDate = (type) => {
    const that = this;
    this.setState({
      rangePickerValue: getTimeDistance(type),
    }, function() {
      // that.fetch();
    });
  };
  fetch = (params) => {
    const that = this;
    this.setState({
      [`${params.type}_${params.channel}`]: {
        meta: this.state[`${params.type}_${params.channel}`].meta,
        data: this.state[`${params.type}_${params.channel}`].data,
        loading: true,
      },
    });
    request(`/workstation_historical_data`, {
      method: 'GET',
      params: {
        ...params,
        start_date: this.state.start_date,
        end_date: this.state.end_date,
        workstation_id: this.props.editRecord.id,
        order_direction:'desc'
      },
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          [`${params.type}_${params.channel}`]: {
            meta: response.data.meta,
            data: response.data.data,
            loading: false,

          },
        });
      }
    });
  };
  fetchChart = (params) => {
    const that = this;
    request(`/workstation_historical_data`, {
      method: 'GET',
      params: {
        ...params,
        start_date: this.state.start_date,
        end_date: this.state.end_date,
        workstation_id: this.props.editRecord.id,
        order_direction:'desc'
      },
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          [`${params.type}_${params.channel}_chart`]: {
            meta: response.data.meta,
            data: response.data.data,
            loading: false,
          },
        });
      }
    });
  };
  handleRangePickerChange = (dateString, type) => {
    const that = this;
    this.setState({
      [type]: dateString,
    }, function() {

    });
  };
  fetHistory=()=>{
    this.fetch({
      type: 'device',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    for(let i=0;i<2;i++){
      this.fetch({
        type:'sensor',
        channel:i,
        page:1,
        per_page:20,
      })
      this.fetch({
        type:'digital_input',
        channel:i,
        page:1,
        per_page:20,
      })
    }
    this.fetch({
      type: 'modbus',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'control_valve',
      channel: 0,
      page: 1,
      per_page: 20,
    });
  }
  getOption=()=>{
    let faqian=[];
    let time=[];
    let sensor_0=JSON.parse(JSON.stringify(this.state.sensor_0_chart))
    let sensor_0_reverse=sensor_0.data.reverse()
    for(let i=0;i<sensor_0_reverse.length;i++){
      if(sensor_0_reverse[i]){
        time.push(sensor_0_reverse[i].collected_at.slice(5))
        faqian.push(sensor_0_reverse[i].data.value)
      }
    }
    let option = {
      title: {
        text: '阀前实时压力',
        textStyle:{
          color:'#ff5190'
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['阀前压力(MPa)']
      },
      grid: {
        top:'35px',
        left: '3%',
        right: '5%',
        bottom: '4%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data:time,
        axisLabel: {
          showMaxLabel: true
        }
      },
      yAxis: {
        type: 'value',
        max:1
      },
      series: [
        {
          name: '阀前压力(MPa)',
          type: 'line',
          large:true,
          smooth:true,
          data: faqian,
          lineStyle:{
            width:5
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 16,
                  color: "#fff"
                },
                formatter: (params) => {
                  if (faqian.length - 1 == params.dataIndex) {
                    return params.value
                  } else {
                    return ""
                  }
                },
              },
            }
          },
          markLine: {
            silent: false,
            label: {
              formatter: '{b} {c}',
              position: 'middle'
            },
            data: [{
              name: '欠压值',
              yAxis: this.props.editRecord.hardware_configs.sensor[0].under
            }, {
              name: '过压值',
              yAxis: this.props.editRecord.hardware_configs.sensor[0].over
            }]
          }
        },

      ]
    };
    return option
  }
  getOption2=()=>{
    var colors = ['#0098ff', '#00ce1d', '#ff7d00'];
    let fahou=[];
    let time=[];
    let sensor_1=JSON.parse(JSON.stringify(this.state.sensor_1_chart))
    let sensor_1_reverse=sensor_1.data.reverse()
    for(let i=0;i<sensor_1_reverse.length;i++){
      if(sensor_1_reverse[i]){
        time.push(sensor_1_reverse[i].collected_at.slice(5))
        fahou.push(sensor_1_reverse[i].data.value)
      }
    }
    let option = {
      color: colors,
      title: {
        text: '阀后实时压力'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['阀后压力(MPa)']
      },
      grid: {
        top:'35px',
        left: '3%',
        right: '5%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data:time,
        axisLabel: {
          showMaxLabel: true
        }
      },
      yAxis: {
        type: 'value',
        max:1

      },
      series: [
        {
          name: '阀后压力(MPa)',
          type: 'line',
          large:true,
          smooth:true,
          data: fahou,
          lineStyle:{
            width:5
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 16,
                  color: "#fff"
                },
                formatter: (params) => {
                  if (fahou.length - 1 == params.dataIndex) {
                    return params.value
                  } else {
                    return ""
                  }
                },
              },
            }
          },
          markLine: {
            silent: false,
            label: {
              formatter: '{b} {c}',
              position: 'middle'
            },
            data: [{
              name: '欠压值',
              yAxis: this.props.editRecord.hardware_configs.sensor[1].under
            }, {
              name: '过压值',
              yAxis: this.props.editRecord.hardware_configs.sensor[1].over
            }]
          }
        },

      ]
    };
    return option
  }
  render() {

    let template = '';
    if (this.props.editRecord.template === 1) {
      template = <Template1/>;
    }
    const that = this;
    return (
      <div style={{ marginTop: '-24px' }} style={{ minHeight: '400px' }}>
        <Tabs defaultActiveKey="1">
          <TabPane tab="站点图片" key="1">
            {template}
          </TabPane>
          <TabPane tab="阀前/后压力曲线" key="2">
            {
              this.state.isWatch===-1?
                <div onClick={this.openWatch}  style={{marginBottom:'10px'}}><Button type={'primary'}>开启监控模式</Button> </div>
                :
                <Alert  style={{marginBottom:'10px'}} message="正处于监控模式" type="info" showIcon />
            }
            <ReactEcharts
              option={this.getOption()}
              style={{ height: '285px', width: '100%' }}
              theme='my_theme'
            />
            <ReactEcharts
              option={this.getOption2()}
              style={{ height: '285px', width: '100%' }}
              theme='my_theme'
            />
          </TabPane>
          <TabPane tab="站点完整数据" key="3">
            <div style={{ marginLeft: '16px' }}>
              开始时间 : <DatePicker
              value={moment(this.state.start_date)}
              allowClear={false}
              format="YYYY-MM-DD"
              style={{ width: 150, marginRight: '10px' }}
              placeholder={'开始日期'}
              onChange={(e, dateString) => this.handleRangePickerChange(dateString, 'start_date')}
            />
              结束时间 : <DatePicker
              allowClear={false}
              value={moment(this.state.end_date)}
              format="YYYY-MM-DD"
              placeholder={'结束日期'}
              style={{ width: 150 }}
              onChange={(e, dateString) => this.handleRangePickerChange(dateString, 'end_date')}
            />
            <Button type={'primary'} style={{marginLeft:'10px'}} onClick={()=>{
                this.fetHistory()
              if(this.timer){
                clearInterval(this.timer)
              }
            }}>刷新</Button>
            </div>
            <Tabs size={'small'} style={{ marginTop: '8px' }}>
              {
                this.state.tabPanes.map((item, index) => {
                  let renderTab = '';
                  if (item.key === 'device') {
                    renderTab = <TabPane tab={item.name} key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[`device_0`].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[`device_0`].loading}
                          rowKey={'id'}
                          dataSource={this.state.device_0.data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 160,
                            },
                            {
                              title: '运行时间',
                              dataIndex: 'uptime',
                              width: 120,
                              render: (text, record) => (
                                timeStamp(record.data.uptime)
                              ),
                            },
                            {
                              title: '重置原因',
                              dataIndex: 'reset_reason',
                              width: 80,
                              render: (text, record) => (
                                record.data.reset_reason
                              ),
                            },
                            {
                              title: <span>供电电压(V)</span>,
                              dataIndex: 'supply_voltage',
                              width: 150,
                              render: (text, record) => (
                                (record.data.supply_voltage / 1000).toFixed(3)),
                            },
                            {
                              title: <span>信号质量(dbm)</span>,
                              dataIndex: 'network_signal_quality',
                              render: (text, record) => (
                                record.data.network_signal_quality
                              ),
                            },
                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: true, y: 400 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: item.key,
                          channel: 0,
                        }} meta={this.state[`${item.key}_0`].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }
                  if (item.key === 'sensor_0'||item.key === 'sensor_1') {
                    renderTab = <TabPane tab={item.name} key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[item.key].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[item.key].loading}
                          rowKey={'id'}
                          dataSource={this.state[item.key].data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 160,
                            },
                            {
                              title: '状态',
                              dataIndex: 'status',
                              width: 150,
                              render: (text, record) => {
                                let color='',value='';
                                switch (Number(record.data.status)) {
                                  case 0:
                                    color='green';
                                    value='正常';
                                    break;
                                  case 1:
                                    color='purple';
                                    value='过压';
                                    break;
                                  case 2:
                                    color='orange';
                                    value='欠压';
                                    break;
                                  case 3:
                                    color='red';
                                    value='故障';
                                    break;

                                }
                                return <Badge color={color} text={value} />
                              }

                            },
                            {
                              title: '压力(MPa)',
                              dataIndex: 'value',
                              render: (text, record) => (
                                record.data.value
                              )
                            },
                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: true, y: 405 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: 'sensor',
                          channel: item.key==='sensor_0'?0:1,
                        }} meta={this.state[item.key].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }
                  if (item.key === 'modbus') {
                    renderTab = <TabPane tab={item.name} key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[`modbus_0`].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[`modbus_0`].loading}
                          rowKey={'id'}
                          dataSource={this.state.modbus_0.data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 160,
                            },
                            {
                              title: '蝶阀1',
                              children: [
                                {
                                  title: <span>动作</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve1_status',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve1_status)) {
                                      case 1:
                                        return <Badge color="#87d068" text="开"/>;
                                      case 2:
                                        return <Badge color="#f50" text="停"/>;
                                      case 4:
                                        return <Badge color="#f50" text="关"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                                {
                                  title: <span>位置</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve1_position',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve1_position)) {
                                      case 1:
                                        return <Badge color="#87d068" text="全开"/>;
                                      case 2:
                                        return <Badge color="#f50" text="全关"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                                {
                                  title: <span>故障标记</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve1_fault',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve1_fault)) {
                                      case 1:
                                        return <Badge color="#f50" text="故障"/>;
                                      case 0:
                                        return <Badge color="#87d068" text="正常"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                              ],
                            },
                            {
                              title: '蝶阀2',
                              children: [
                                {
                                  title: <span>动作</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve2_status',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve2_status)) {
                                      case 1:
                                        return <Badge color="#87d068" text="开"/>;
                                      case 2:
                                        return <Badge color="#f50" text="停"/>;
                                      case 4:
                                        return <Badge color="#f50" text="关"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                                {
                                  title: <span>位置</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve2_position',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve2_position)) {
                                      case 1:
                                        return <Badge color="#87d068" text="全开"/>;
                                      case 2:
                                        return <Badge color="#f50" text="全关"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                                {
                                  title: <span>故障标记</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve2_fault',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve2_fault)) {
                                      case 1:
                                        return <Badge color="#f50" text="故障"/>;
                                      case 0:
                                        return <Badge color="#87d068" text="正常"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                              ],
                            },
                            {
                              title: '蝶阀3',
                              children: [
                                {
                                  title: <span>动作</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve3_status',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve3_status)) {
                                      case 1:
                                        return <Badge color="#87d068" text="开"/>;
                                      case 2:
                                        return <Badge color="#f50" text="停"/>;
                                      case 4:
                                        return <Badge color="#f50" text="关"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                                {
                                  title: <span>位置</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve3_position',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve3_position)) {
                                      case 1:
                                        return <Badge color="#87d068" text="全开"/>;
                                      case 2:
                                        return <Badge color="#f50" text="全关"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                                {
                                  title: <span>故障标记</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve3_fault',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve3_fault)) {
                                      case 1:
                                        return <Badge color="#f50" text="故障"/>;
                                      case 0:
                                        return <Badge color="#87d068" text="正常"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                              ],
                            },
                            {
                              title: '蝶阀4',
                              children: [
                                {
                                  title: <span>动作</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve4_status',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve4_status)) {
                                      case 1:
                                        return <Badge color="#87d068" text="开"/>;
                                      case 2:
                                        return <Badge color="#f50" text="停"/>;
                                      case 4:
                                        return <Badge color="#f50" text="关"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                                {
                                  title: <span>位置</span>,
                                  width: 80,
                                  dataIndex: 'butterfly_valve4_position',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve4_position)) {
                                      case 1:
                                        return <Badge color="#87d068" text="全开"/>;
                                      case 2:
                                        return <Badge color="#f50" text="全关"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                                {
                                  title: <span>故障标记</span>,
                                  dataIndex: 'butterfly_valve4_fault',
                                  render: (text, record) => {
                                    switch (Number(record.data.butterfly_valve4_fault)) {
                                      case 1:
                                        return <Badge color="#f50" text="故障"/>;
                                      case 0:
                                        return <Badge color="#87d068" text="正常"/>;
                                      default:
                                        return '';
                                    }
                                  },
                                },
                              ],
                            },

                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: 1160, y: 370 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: item.key,
                          channel: 0,
                        }} meta={this.state[`${item.key}_0`].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }

                  if (item.key === 'digital_input_0') {
                    renderTab = <TabPane tab={item.name} key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[`digital_input_0`].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[`digital_input_0`].loading}
                          rowKey={'id'}
                          dataSource={this.state.digital_input_0.data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 160,
                            },
                            {
                              title: '液位状态',
                              dataIndex: 'level',
                              width: 160,
                              render: (text, record) => {
                                return Number(record.data.level)===1? <Badge color="#87d068" text="正常" />:  <Badge color="#f50" text="过高" />
                              }
                            },
                            {
                              title: '报警',
                              dataIndex: 'alarm',
                              render: (text, record) => (
                                Number(record.data.alarm===1)? <Badge color="#f50" text="报警" />: <Badge color="#87d068" text="正常" />
                              )
                            },
                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: true, y: 405 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: 'digital_input',
                          channel: 0,
                        }} meta={this.state[`digital_input_0`].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }
                  if (item.key === 'digital_input_1') {
                    renderTab = <TabPane tab={item.name} key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[`digital_input_1`].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[`digital_input_1`].loading}
                          rowKey={'id'}
                          dataSource={this.state.digital_input_1.data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 160,
                            },
                            {
                              title: '井盖状态',
                              dataIndex: 'level',
                              width: 160,
                              render: (text, record) => {
                                return Number(record.data.level)===1? <Badge color="#87d068" text="打开" />: <Badge color="#f50" text="关闭" />
                              }
                            },
                            {
                              title: '报警',
                              dataIndex: 'alarm',
                              render: (text, record) => (
                                Number(record.data.alarm===1)? <Badge color="#f50" text="报警" />: <Badge color="#87d068" text="正常" />
                              )
                            },
                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: true, y: 405 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: 'digital_input',
                          channel: 1,
                        }} meta={this.state[`digital_input_1`].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }
                  if (item.key === 'control_valve') {
                    renderTab = <TabPane tab={item.name} key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[`control_valve_0`].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[`control_valve_0`].loading}
                          rowKey={'id'}
                          dataSource={this.state.control_valve_0.data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 160,
                            },
                            {
                              title: <span>阀前压力(KPa)</span>,
                              width: 120,
                              dataIndex: 'upstream_pressure',
                              render: (text, record) => {
                                return record.data.upstream_pressure;
                              },
                            },
                            {
                              title: <span>阀后压力(KPa)</span>,
                              width: 120,
                              dataIndex: 'downstream_pressure',
                              render: (text, record) => {
                                return record.data.downstream_pressure;
                              },
                            },
                            {
                              title: <span>目标压力(KPa)</span>,
                              width: 120,
                              dataIndex: 'target_pressure',
                              render: (text, record) => {
                                return record.data.target_pressure;
                              },
                            },
                            {
                              title: <span>调压上误差(KPa)</span>,
                              width: 120,
                              dataIndex: 'high_error_pressure ',
                              render: (text, record) => {
                                return record.data.high_error_pressure;
                              },
                            },
                            {
                              title: <span>调压下误差(KPa)</span>,
                              width: 120,
                              dataIndex: 'low_error_pressure',
                              render: (text, record) => {
                                return record.data.low_error_pressure;
                              },
                            },
                            {
                              title: <span>开度行程(mm)</span>,
                              dataIndex: 'stroke',
                              render: (text, record) => {
                                return record.data.stroke;
                              },
                            },
                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: true, y: 405 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: item.key,
                          channel: 0,
                        }} meta={this.state[`${item.key}_0`].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }
                  return renderTab;
                })
              }
            </Tabs>

          </TabPane>
        </Tabs>


      </div>

    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
